<template>
  <div class="test-technicians">
    <h1>技师数据测试页面</h1>
    
    <div class="test-section">
      <h2>技师列表</h2>
      <div v-if="loading" class="loading">加载中...</div>
      <div v-else-if="error" class="error">{{ error }}</div>
      <div v-else class="technicians-list">
        <div v-for="tech in technicians" :key="tech._id" class="technician-item">
          <h3>{{ tech.name }}</h3>
          <p>ID: {{ tech._id }}</p>
          <p>头像: {{ tech.avatar }}</p>
          <p>评分: {{ tech.rating }}</p>
          <p>状态: {{ tech.status }}</p>
          <p>技能: {{ tech.skills.join(', ') }}</p>
          <p>经验: {{ tech.experience }}年</p>
          <p>电话: {{ tech.phone }}</p>
          <p>邮箱: {{ tech.email }}</p>
        </div>
      </div>
    </div>
    
    <div class="test-section">
      <h2>服务列表</h2>
      <div v-if="servicesLoading" class="loading">加载中...</div>
      <div v-else-if="servicesError" class="error">{{ servicesError }}</div>
      <div v-else class="services-list">
        <div v-for="service in services" :key="service._id" class="service-item">
          <h3>{{ service.name }}</h3>
          <p>类别: {{ service.category }}</p>
          <p>价格: ¥{{ service.price }}</p>
          <p>时长: {{ service.duration }}分钟</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '../utils/request'

const technicians = ref([])
const services = ref([])
const loading = ref(false)
const servicesLoading = ref(false)
const error = ref('')
const servicesError = ref('')

const fetchTechnicians = async () => {
  loading.value = true
  error.value = ''
  
  try {
    console.log('正在获取技师数据...')
    const response = await request.get('/api/quick-registration/technicians')
    console.log('技师API响应:', response.data)
    
    if (response.data.code === 200) {
      technicians.value = response.data.data
      console.log('技师数据:', technicians.value)
    } else {
      error.value = response.data.message || '获取技师数据失败'
    }
  } catch (err) {
    console.error('获取技师数据失败:', err)
    error.value = err.message || '获取技师数据失败'
  } finally {
    loading.value = false
  }
}

const fetchServices = async () => {
  servicesLoading.value = true
  servicesError.value = ''
  
  try {
    console.log('正在获取服务数据...')
    const response = await request.get('/api/quick-registration/services')
    console.log('服务API响应:', response.data)
    
    if (response.data.code === 200) {
      services.value = response.data.data
      console.log('服务数据:', services.value)
    } else {
      servicesError.value = response.data.message || '获取服务数据失败'
    }
  } catch (err) {
    console.error('获取服务数据失败:', err)
    servicesError.value = err.message || '获取服务数据失败'
  } finally {
    servicesLoading.value = false
  }
}

onMounted(() => {
  fetchTechnicians()
  fetchServices()
})
</script>

<style scoped>
.test-technicians {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.technicians-list,
.services-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.technician-item,
.service-item {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.loading {
  color: #666;
  font-style: italic;
}

.error {
  color: #f56c6c;
  font-weight: bold;
}
</style> 